<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px" :rules="rules">
      <el-row>
        <el-col :span="8">
          <el-form-item label="供应商">
            <el-select v-model="form.value" placeholder="请选择" @change="getTableData(form.value)">
              <el-option v-for="item in options" :key="item" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item>
          <el-table :data="form.tableData" height="300">
            <el-table-column property="itemId" label="商品编号" width="150"></el-table-column>
            <el-table-column property="itemName" label="商品名称" width="300"></el-table-column>
            <el-table-column property="price" label="定价" width="200"></el-table-column>
            <el-table-column fixed="right" label="商品数量" prop="number">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.number" :min="0" :step="50" label="商品数量"></el-input-number>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            style="margin-top: 10px;"
            background
            layout="sizes,prev, pager, next"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :page-sizes="[5, 10, 20, 40]"
            :current-page="pageNumber"
            :page-size="pageSize"
            :total="total"
          >
            <!-- pageNumber 和pageSize触发 -->
          </el-pagination>
        </el-form-item>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="支付" prop="resource">
            <el-radio-group v-model="form.pay">
              <el-radio label="现金支付"></el-radio>
              <el-radio label="记账"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8" class="stateFaile">
          <el-form-item label="总金额" v-model="form.tocalCount">
            <!-- 总金额计算方法 -->
            <span class="stateFaile">{{total_price}}￥</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item>
            <el-button type="primary" @click="submitForm('form')">立即进货</el-button>
            <el-button @click="resetForm('form')">返回</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import axios from "axios";
const baseUrl = "http://47.102.99.195:8888";

export default {
  data() {
    return {
      options: [],
      value: "",
      form: {
        tableData: [], //表格数据
        tocalCount: "", //总金额
        pay: "" //是否记账
      },
      pageNumber: 1,
      pageSize: 5,
      total: 0,
      rules: {
        pay: [{ required: true, message: "请选择支付方式", trigger: "change" }]
      }
    };
  },
  mounted() {
    this.getSupply();
    this.getTableData("森马");
  },
  methods: {
    /**
     * 提交订单
     */
    submitForm: function(form) {
      var param = {
        dtos:this.form.tableData,
        total:this.total_price
      }
      console.log('form');
      console.log(param);


      axios
        .post(baseUrl+"/inventory/addInventory",param)
        .then(res=>{
          if(res.data.event===0){
            this.$message({
            type: "success",
            message: "进货成功"
          });
          }else{
            this.$message({
            type: "error",
            message: res.data.msg
          });
          }
        })
        .catch(() => {
          this.$message({
            type: "error",
            message: "出现异常"
          });
        });
    },
    /**
     * 重置订单
     */
    resetForm: function(form) {

       //重置clear的正确方式
      this[form] = {}; //初始化表单
      this.$router.push("/home/inventorySearch");
    },
    /**
     * 获取供应商
     */
    getSupply() {
      axios
        .get(baseUrl + "/inventory/getSupply")
        .then(res => {
          if (res.data.event === 0) {
            //将后台值赋予给选项
            this.options = res.data.obj;
          } else {
            this.$message({ type: "error", message: res.data.msg });
          }
        })
        .catch(() => {
          this.$message({ type: "error", message: "出现异常" });
        });
    },
    /**
     * 获取表格数据
     */
    getTableData(brand) {
      console.log(brand);

      var searchForm = {
        //查询item表单数据
        className: "",
        itemNumbwe: "",
        brand: brand,
        itemName: "",
        createTime: ""
      };
      axios
        .post(baseUrl + "/inventory/searchItem", searchForm, {
          params: {
            pageNumber: this.pageNumber,
            pageSize: this.pageSize
          }
        })
        .then(res => {
          if (res.data.event === 0) {
            this.form.tableData = res.data.obj;
            this.total = res.data.maxCount;
          } else {
            this.$message({ type: "error", message: res.data.msg });
          }
        })
        .catch(() => {
          this.$message({ type: "error", message: "出现异常" });
        });
    },
    /**
     * 更改页码
     */
    handleCurrentChange(pageNumber) {
      this.pageNumber = pageNumber;
      this.getTableData();
    },
    /**
     * 更改页数
     */
    handleSizeChange: function(size) {
      this.pageSize = size;
      this.getTableData();
    }
  },
  computed: {
    //计算总金额
    total_price: function() {
      let sum_price = 0;
      this.form.tableData.forEach(item => {
        sum_price += item.price * item.number;
      });
      return sum_price;
    }
  }
};
</script>
<style lang="scss" scoped>
.stateFaile {
  color: #f56c6c;
}
</style>
